<template>
  <Wrapper v-slot="{ isDark, useView, toggleView }" center>
    <div :class="['login-items', { dark: isDark, light: !isDark }]">
      <LoginToggle :isDark="isDark" :at="useView" @click="($event) => toggleView.pswdScan()" />

      <h2>{{ title(useView) }}</h2>

      <div v-if="useView === 'scan'">
        <div class="vue-qrcode">
          <Qrcode
            :value="qrCodeValue"
            :size="size"
            :color="color"
            :coverage="coverage"
            :imgSrc="imgSrc"
          />
        </div>
        <div class="qrcode-tips">请使用手机客户端扫一扫登陆</div>
      </div>

      <div v-if="useView === 'password'">
        <UInput></UInput>

        <div class="qrcode-tips">请填写你的注册信息</div>
      </div>
    </div>
  </Wrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Qrcode from '@/components/qrcode/QrCode.vue'
import Wrapper from './AuthWrapper.vue'
import LoginToggle from '@/apps/auth/views/loginToggle.vue'
import UInput from '../../../components/input/src/AuthInput.vue'
import type { AuthViewType } from './types'

const title = (type: AuthViewType) => {
  if (type === 'password') {
    return '密码登陆'
  } else if (type === 'register') {
    return '用户注册'
  } else {
    return '扫码登陆'
  }
}

const qrCodeValue = ref('http://thispage.tech:9680/')
const color = ref('#0000d9')
const size = ref(200)
const coverage = ref(0.26)
const imgSrc = ref('/jcstudio_256.ico')
</script>

<style lang="scss" scoped>
.dark {
  color: #f8f8f8;
}

.light {
  color: #8a8c8a;
}

.login-items {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  flex-direction: column;

  h2 {
    width: 100%;
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    /* font-family: "Microfoft Yahei", Verdana, Arial, Helvetica, sans-serif; */
  }

  .vue-qrcode {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }

  .qrcode-tips {
    width: 100%;
    text-align: center;
  }

  /* justify-content: center; */
  /* align-items: center; */
}
</style>
